<template>
  <div class="translation">
    <div class="translation-textarea" v-loading="translating">
      <div class="handler-btn">
        <language style="margin-right: 10px" @change="onSelLanguage"/>
        <el-button type="primary" :disabled="!sourceText" @click="toTranslate" size="small">手动翻译</el-button>
        <el-button type="primary"  size="small" @click="toClear">清除</el-button>
      </div>
      <el-input
          v-model.trim="sourceText"
          :rows="4"
          type="textarea"
          resize="none"
          :disabled="translating"
          maxlength="2000"
          show-word-limit
          placeholder="请输入需要翻译的文本，按下enter也可以翻译文本框内的文本。"
          @keyup.enter="toTranslate"
      />
    </div>
    <div class="translation-textarea-readonly">
      <div title="点击图标自动复制">
        <el-input
            v-model="resultText"
            :rows="4"
            disabled
            type="textarea"
            resize="none"
            maxlength="2000"
            show-word-limit
            placeholder=""
            @keyup.enter="toTranslate"
        />
      </div>
      <el-icon class="copy-icon" size="20" title="点击自动复制" @click="toCopy(resultText)"><DocumentCopy /></el-icon>
    </div>
  </div>
</template>


<script lang="ts">
import translate from "./scripts/translation";
import language from "./language.vue";
import { ref } from 'vue'
import {copy} from "@/utils/tools";
import {ElMessage} from 'element-plus'
import { debounce } from 'throttle-debounce';

export default {
  name: 'translationIndex',
  components: { language },
  setup() {
    const sourceText = ref('')
    const resultText = ref('')
    const translating = ref(false)
    let lang = 'en'
    const onSelLanguage = ( sel: string) => {
      lang = sel
    }
    /* 翻译方法 */
    const toTranslate = () => {
      translating.value = true
      debounce(500, () => {
        translate(sourceText.value, lang).then((res: any) => {
          if(res?.error_code === 54004) {
            ElMessage.error('账号余额不足， 小金库已经消耗空了，翻译功能需要等下个月发工资了~')
          }
          if(res?.error_code) {
            ElMessage.error(res.error_msg)
          }
          if (res && res.trans_result?.length && res.trans_result.length > 0) {
            const result = res.trans_result[0].dst
            resultText.value = result
          }
          translating.value = false
        })
      })()
    }
    const toClear = () => {
      sourceText.value = ''
      resultText.value = ''
    }
    const toCopy = (text: any) => {
      if(!resultText.value) return
      copy(text, '结果复制成功！')
    }
    return {
      sourceText,
      resultText,
      translating,
      toTranslate,
      onSelLanguage,
      toClear,
      toCopy
    }
  }
}
</script>

<style lang="scss">
.translation {
  margin: 0 auto;
  width: 90%;
  height: 100%;
  text-align: right;
  .translation-textarea {
    margin: 0 auto 40px;
    overflow: hidden;
    .handler-btn {
      margin-bottom: 5px;
    }
  }
  .translation-textarea-readonly {
    position: relative;
    textarea {
      cursor: text !important;
    }
    .copy-icon {
      position: absolute;
      z-index: 1;
      right: 5px;
      top: -25px;
      cursor: pointer;
      &:hover {
        color: #337ecc;
      }
    }
  }
}
</style>
